// 定义变量 存储 请求结果
let goods = 0;
const urlObj = getUrlObj();
console.log(urlObj);

// 引入公共head.html
$("#head").load("./head.html", function () {
    // 引入公共head.js
    var sc = document.createElement("script");
    sc.src = "../js/head.js";
    $("body").append(sc);
});


// 引入公共foot.html
$("#foot").load("./foot.html");





// 调用函数 动态生成页面
setPage();


// 页面是动态生成的，所以用事件委托做
// 鼠标移入，显示遮罩层和放大的图片
$('.container').on('mouseenter', '.show', function (e) {
    // console.log($(this))
    $('.mask').show()
    // let png = $('.show>img').attr('src')
    // console.log(png)
    // $('.glass').css('background-image',"url("+png+")")
    $('.glass').show()
})

// 鼠标移出，隐藏遮罩层和放大的图片
$('.container').on('mouseleave', '.show', function (e) {
    // console.log($(this))
    $('.mask').hide()
    $('.glass').hide()
})

// 鼠标在图片内移动，放大的图片也跟着移动
$('.container').on('mousemove', '.show', function (e) {
    // console.log($(this))
    // console.log($(this).offset().left)
    // 左 上 间距
    let glassLeft = $(this).offset().left;
    let glassTop = $(this).offset().top;

    // // 显示区 边框线
    let showBorderLeft = 1;
    let showBorderTop = 1;

    // 显示区 占位 内容+padding 
    let showWidth = $(this).innerWidth();
    let showHeight = $(this).innerHeight();

    // 遮盖层 占位 内容+padding+border
    let maskWidth = $('.mask').outerWidth();
    let maskHeight = $('.mask').outerHeight();

    // 获取坐标位置 
    // 鼠标坐标 - 外边距 - 边框线 - 遮盖层占位/2
    let x = e.pageX - glassLeft - showBorderLeft - maskWidth / 2;
    let y = e.pageY - glassTop - showBorderTop - maskHeight / 2;

    // 设定极值
    x = x < 0 ? 0 : x;
    y = y < 0 ? 0 : y;

    x = x > showWidth - maskWidth ? showWidth - maskWidth : x;
    y = y > showHeight - maskHeight ? showHeight - maskHeight : y;

    // 将数值设定为 遮盖层定位
    $('.mask').css('left', x + 'px')
    $('.mask').css('top', y + 'px')


    // 设定 放大镜 背景图片 定位数值
    // 1, 定位数值 和 遮盖层定位 数值 符号相反
    // 2, 定位的数值 是 遮盖层定位 数值 乘以 比例关系
    // 遮盖层:放大镜 = 显示区:背景图 = 遮盖层定位 : 背景图定位
    $('.glass').css("background-position", `${-4*x}px ${-4*y}px`)
})

// 减号
$('.container').on('click', '[name="-"]', function () {
    // 如果是1，点了没用
    if ($('.num').val() - 0 - 1 === 0) {
        return
    }
    $('.num').val($('.num').val() - 0 - 1)
})

// 加号
$('.container').on('click', '[name="+"]', function () {
    console.log(goods.goods_number)
    // 如果是到了内存数量，禁用
    if ($('.num').val() - 0 + 1 >= goods.goods_number - 0) {
        return
    }
    $('.num').val($('.num').val() - 0 + 1)
})

function addGood(goods, num) {

}

// 加入购物车
$('.container').on('click', '[name="inCart"]', function () {
    let cookieObj = myGetCookie()
    // console.log(cookieObj.login)

    // 没登陆
    if (cookieObj.login === undefined) {
        window.location.href = '../pages/login.html'
    }
    // 已经登陆了
    else {
        let cart = window.localStorage.cart
        let num = Number($('.num').val())

        // 购买数量 超出 范围 终止程序 弹出提示内容
        if (!(num >= 1 && num <= goods.goods_number)) {
            // 弹出提示框
            window.alert(`商品数量范围必须是 1 至 库存数值 ${goods.goods_number}`);
            // 终止之后的程序
            return;
        }

        // 没有，创建
        if (cart === undefined) {
            goods.buy = true
            goods.num = num
            window.localStorage.cart = JSON.stringify([goods])

        }
        // 已经创建了cart
        else {
            cart = JSON.parse(cart)
            if (cart.length === 0) {
                // window.alert('有人帮您清空了购物车')
                goods.buy = true
                goods.num = num
                cart.unshift(goods)
                window.localStorage.cart = JSON.stringify(cart)

            } else {
                // cart中是否存在当前商品
                let bool = cart.some(function (item) {
                    return item.goods_id === goods.goods_id
                })

                // cart中不存在当前商品
                if (!bool) {
                    goods.buy = true
                    goods.num = num
                    cart.unshift(goods)
                    window.localStorage.cart = JSON.stringify(cart)
                }
                // cart中存在当前商品,直接增加num
                else {
                    for (var i = 0; i < cart.length; i++) {
                        if (cart[i].goods_id === goods.goods_id) {
                            if (cart[i].num + num > goods.goods_number) {
                                window.alert(`商品数量多了，必须是 1 至 库存数值 ${goods.goods_number}`);
                                return
                            }
                            cart[i].num += num
                            break
                        }
                    }
                    window.localStorage.cart = JSON.stringify(cart)
                }
            }
        }
    }


    // 跳转购物车页面
    window.location.href = './cart.html';
})

// 点击立即登录时候
$('#head').on('click','[name="login"]',function(){
    // 没登录，跳转到登录页面时候
    if( myGetCookie().login===undefined){
        // 记录从列表页跳到登录页
        window.localStorage.setItem('url', 'detail')
    }
})



async function setPage() {
    const res = await myPromiseAjax('../server/goods_detail.php', 'post', {
        goods_id: urlObj.goods_id
    }, 'json')
    console.log(res)

    goods = res

    // 根据 请求结果 动态渲染生成页面
    let str = `
        <div class="panel panel-default">
            <div class="panel-heading">
                <ol class="breadcrumb">
                    <li><a href="#">${res.cat_one_id}</a></li>
                    <li><a href="#">${res.cat_two_id}</a></li>
                    <li class="active">${res.cat_three_id}</li>
                </ol>
            </div>
            <div class="panel-body">
                <div class="media">
                    <div class="media-left">
                        <div class="show">
                            <img class="media-object" src="${res.goods_small_logo}" alt="...">
                            <div class="mask"></div>
                        </div>
                        <div class="glass" style="background-image:url(${res.goods_small_logo})"></div>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">${res.goods_name}</h4>
                        <p class="p-price">
                            <small>￥</small>
                            <span>${res.goods_price}</span>
                        </p>
                        <div class="btn-group" role="group" aria-label="...">
                            <div class="vm-metatit">选择尺码</div>
                            <button type="button" class="btn btn-default">XL</button>
                            <button type="button" class="btn btn-default">L</button>
                            <button type="button" class="btn btn-default">M</button>
                            <button type="button" class="btn btn-default">S</button>
                            <button type="button" class="btn btn-default">XS</button>
                        </div>
                        <div class="property-control">
                            <div class="vm-metatit">选择数量</div>
                            <div class="mod-control">
                                <a href="javascript:;" name="-" class="jian">-</a>
                                <input value="1" class="num">
                                <a href="javascript:;" name="+" class="jia">+</a>
                            </div>
                        </div>
                        <div class="property-buy-action">
                            <a href="javascript:;" class="btn btn-info btn-lg" role="button">立即购买</a>
                            <a href="javascript:;" name="inCart" class="btn btn-danger btn-lg" role="button">加入购物车</a>
                        </div>
                    </div>
                </div>

                <ul class="nav nav-tabs">
                    <li role="presentation" class="active"><a href="#">商品详细信息</a></li>
                    <li role="presentation"><a href="#">商品参数信息</a></li>
                    <li role="presentation"><a href="#">相关商品</a></li>
                </ul>

                <div>
                    ${res.goods_introduce}
                </div>
            </div>
        </div>
    `;

    $('.container').html(str)
}